<template>
  <view>
    <view class="navbar">
      <view
        v-for="(item, index) in navList"
        :key="index"
        class="nav-item"
        :class="{ current: tabCurrentIndex === item.key }"
        @click="tabClick(item.key)"
      >
        {{ item.text }}
      </view>
    </view>
    <Table ref="table" :fetchData="fetchData">
      <template #default="{ data }">
        <uni-card
          @click="cardClick(item)"
          v-for="item in data"
          :title="item.routeName"
          :extra="item.startTime"
          :sub-title="item.planTaskState"
        >
        </uni-card>
      </template>
    </Table>
  </view>
</template>

<script setup>
import { ref, onActivated } from "vue";
import Table from "@/components/uniList.vue";
import { useAsyncData } from "@/hooks/useAsyncData.js";
import { apis as APIS } from "@/api/znxj/xjrw.js";
import { router } from "@/router/index.js";
import { PATH } from "../paths";
let mapstate = {
  notc: "未完成",
  iste: "已超时",
  isc: "已完成",
};
const navList = ref([
  { text: "未完成", key: "notc" },
  { text: "已超时", key: "iste" },
  { text: "已完成", key: "isc" },
]);
const tabCurrentIndex = ref("notc");
const tabClick = async (key) => {
  tabCurrentIndex.value = key;
  filterForm.value.planTaskState = mapstate[key];
  await getList();
};
const cardClick = (item) => {
  router.toPage({
    path: PATH.POINTLIST,
    params: {
      pid: item.id,
      planTaskState: item.planTaskState,
    },
  });
};
const table = ref();
const filterForm = ref({
  planTaskState: mapstate[tabCurrentIndex.value],
});
// const fetchData = (pageForm, done) => {
//   tabCurrentIndex.value = key;
//   filterForm.value.planTaskState = mapstate[key];
//   return APIS.query({
//     pageNum: pageForm.page,
//     pageSize: pageForm.size,
//     ...filterForm.value,
//   }).then((res) => {
//     if (formatList) {
//       res.rows = formatList(res.rows || res.data) || res.rows || res.data;
//     }
//     done({
//       list: res.rows || res.data,
//       total: res.total,
//     });
//     return res.rows || res.data;
//   });
// };
const { fetchData, getList, queryParams } = useAsyncData({
  table,
  APIS,
  filterForm: filterForm.value,
});
onActivated(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.navbar {
  display: flex;
  height: 40px;
  padding: 0 5px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;

  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 15px;
    position: relative;

    &.current {
      color: blue;

      &:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 44px;
        height: 0;
        // border-bottom: 2px solid $base-color;
      }
    }
  }
}
</style>
